<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/sweetalert.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/sweetalert.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/table/bootstrap-table.min.js"></script>

</head>
<body style="height: 100%; margin: 0">
<select id="date" class="form-control" style="width: 100px;margin-left: 91%">
    <option value="1">上半年</option>
    <option value="2">下半年</option>
    <option value="3">全部</option>
</select>

<div id="container" style="height: 100%">

</div>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };
    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
                name: {
                    textBorderColor: '#fff'
                }
            }
        }
    };

    option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['本月销售最高菜品', '本月订单成交量', '本月营业额']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '本月销售最高菜品',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: []
            },
            {
                name: '本月订单成交量',
                type: 'bar',
                label: labelOption,
                data: []
            },
            {
                name: '本月营业额',
                type: 'bar',
                label: labelOption,
                data: []
            }
        ]
    };
    var names=[];    //类别数组（实际用来盛放X轴坐标值）

    var totalamount=[];
    var hotsale=[];
    var month=[];
    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url: '${pageContext.request.contextPath}/Statistics/Statistics?date='+$("#date").val(),    //请求发送到TestServlet处
        data : {},
        success : function(data) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            var mydata = new Date();
            if (data) {
                for (var i = 0; i < data.list.length; i++) {
                    var time = mydata.toString().substring(11,15)+"年"+data.list[i].alltime+"月";
                    names.push(time);
                    hotsale.push(data.list[i].hotsale);
                    totalamount.push(data.list[i].totalamount);
                    month.push(data.list[i].month);
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    xAxis: {
                        data:names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '本月销售最高菜品',
                        data: hotsale
                    },{
                        // 根据名字对应到相应的系列
                        name: '本月订单成交量',
                        data: month
                    },{
                        // 根据名字对应到相应的系列
                        name: '本月营业额',
                        data: totalamount
                    }]
                });
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    $("#date").change(function(){
        var names=[];    //类别数组（实际用来盛放X轴坐标值）

        var totalamount=[];
        var hotsale=[];
        var month=[];
       var date = $("#date").val();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: '${pageContext.request.contextPath}/Statistics/Statistics?date='+date,    //请求发送到TestServlet处
            data : {},
            success : function(data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var mydata = new Date();
                if (data) {
                    for (var i = 0; i < data.list.length; i++) {
                        var time = mydata.toString().substring(11,15)+"年"+data.list[i].alltime+"月";
                        names.push(time);
                        hotsale.push(data.list[i].hotsale);
                        totalamount.push(data.list[i].totalamount);
                        month.push(data.list[i].month);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data:names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '本月销售最高菜品',
                            data: hotsale
                        },{
                            // 根据名字对应到相应的系列
                            name: '本月订单成交量',
                            data: month
                        },{
                            // 根据名字对应到相应的系列
                            name: '本月营业额',
                            data: totalamount
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    });
</script>
</body>
</html>